<template>
  <div class="user-my-ais box-shadow px-5 py-5 rounded mt-4"
    v-if="pagination.total && pagination.total > 0">
    <div class="flex items-center gap-y-3 gap-x-7 flex-wrap">
      <h3 class="text-xl text-gray-1000 font-semibold">{{$t('user_myAIs')}}</h3>
      <common-link path="/submit"
        class="border border-gray-1300 px-3 py-1.5 text-base text-gray-1000 rounded hover:text-purple-1300 hover:border-purple-1300">
        {{$t('user_submitAnotherAi')}}
      </common-link>
    </div>
    <div class="tTable"
      v-if="!isFirstLoad"
      style="overflow-x: auto;"
      v-loading="loading && !isFirstLoad">
      <table style="width: 100%; min-width: 780px;"
        v-if="tableData && tableData.length>0">
        <thead>
          <tr>
            <th style="width: 18.5%">
              <div class="cell">
                {{$t('user_tool')}}
              </div>
            </th>
            <th style="width: 12.5%">
              <div class="cell">
                {{$t('user_organicClicks')}}
              </div>
            </th>
            <th style="width: 10%">
              <div class="cell">
                {{$t('user_paidClicks')}}
              </div>
            </th>
            <th style="width: 11.5%">
              <div class="cell">
                {{$t('user_totalClicks')}}
              </div>
            </th>
            <th style="width: 12%">
              <div class="cell">
                {{$t('user_openDetails')}}
              </div>
            </th>
            <th style="width: 7%">
              <div class="cell">
                {{$t('user_save')}}
              </div>
            </th>
            <th style="width: 13.5%">
              <div class="cell">
                {{$t('user_totalImpressions')}}
              </div>
            </th>
            <th style="width: 15%">
              <div class="cell">
                {{$t('user_addedTime')}}
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="el-table__row"
            v-for="(row, key) in tableData"
            :key="key">
            <td>
              <div class="cell">
                <common-link path="/tool/:handle"
                  v-if="row.tool && $websiteName(row.tool) && row.tool.handle"
                  :params="{ handle:row.tool.handle }"
                  class="text-base font-semibold text-gray-1000 break-words hover:text-purple-1300 go-tool"
                  target="_blank">
                  {{$websiteName(row.tool)}}
                </common-link>
                <p v-else-if="row.tool && $websiteName(row.tool)"
                  class="text-base font-semibold text-gray-1000 break-words">
                  {{$websiteName(row.tool)}}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.organic_external_clicks) ? row.organic_external_clicks : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.paid_external_clicks) ? row.paid_external_clicks : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.external_clicks) ? row.external_clicks : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.internal_clicks) ? row.internal_clicks : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.collected_count) ? row.collected_count : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ hasRealVal(row.impressions) ? row.impressions : '--' }}
                </p>
              </div>
            </td>
            <td>
              <div class="cell">
                <p class="text-base text-gray-1000 break-words">
                  {{ row.tool && row.tool && hasRealVal(row.tool.created_at) ? $formattedDate(row.tool.created_at, fI18n, locale) : '--' }}
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <el-empty v-else
        class="sm:flex-1"
        :description="$t('user_noData')"></el-empty>
    </div>
    <!-- <div class="tTable skeleton"
      v-else
      style="overflow-x: auto;">
      <el-skeleton animated>
        <template slot="template">
          <table style="width: 100%; min-width: 780px;">
            <thead>
              <tr>
                <th style="width: 18.5%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 12.5%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 10%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 11.5%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 12%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 7%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 13.5%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
                <th style="width: 15%">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="el-table__row"
                v-for="(row, key) in 5"
                :key="key">
                <td v-for="(row, key) in 8"
                  :key="`td-${key}`">
                  <div class="cell">
                    <el-skeleton-item variant="div" />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </template>
      </el-skeleton>
    </div> -->
    <div class="pagination"
      v-if="pagination.total && pagination.total > pagination.pageSize">
      <el-pagination :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        :layout="_isMobile() ? minLayout : layout"
        :small="_isMobile() ? true : false"
        :total="pagination.total"
        :disabled="loading"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'UserMyAis',
  props: {},
  data() {
    return {
      loading: false,
      isFirstLoad: true,
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      layout: 'total, sizes, prev, pager, next, jumper',
      minLayout: 'prev, next',
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  created() {
    this.getList({
      per_page: 10,
      page: 1,
    })
  },
  methods: {
    async getList(page) {
      let req = JSON.parse(JSON.stringify({ ...page }))
      try {
        /* 搜索条件固化 */
        for (let item in req) {
          if (req[item] === null || req[item] === '') {
            delete req[item]
          }
        }

        const res = await this.$axiosApi.userTools(req)

        this.loading = false
        this.isFirstLoad = false
        if (res && res.code === 200) {
          this.tableData = res.data.data
          this.pagination.current = res.data.current_page
          this.pagination.total = res.data.total
          this.pagination.pageSize = res.data.per_page
          this.$emit('updateAiTotal', this.pagination.total)
        }
      } catch (error) {
        this.isFirstLoad = false
        this.loading = false
      }
    },
    async handleSizeChange(val) {
      if (this.loading) {
        return false
      }
      this.loading = true
      await this.getList({
        per_page: val,
        page: 1,
      })
      this.loading = false
      this.intoView()
    },
    async handleCurrentChange(val) {
      if (this.loading) {
        return false
      }
      this.loading = true
      await this.getList({
        per_page: this.pagination.pageSize,
        page: val,
      })
      this.loading = false
      this.intoView()
    },
    _isMobile() {
      if (process.browser) {
        let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
        return flag
      } else {
        return false
      }
    },
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    intoView() {
      const dom = document.querySelector('.user-my-ais')
      if (dom) {
        const top = dom.offsetTop

        const targetScrollPosition = Math.max(top - 100, 0)

        let timer = setTimeout(() => {
          window.scrollTo({
            top: targetScrollPosition,
            behavior: 'auto',
          })

          this.$nextTick(() => {
            clearTimeout(timer)
          })
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common-table.scss';
.user-my-ais {
  .tTable {
    margin-top: 18px;
  }

  .pagination {
    text-align: right;
    margin-top: 20px;
    ::v-deep .el-pagination {
      padding: 0;
      .el-pagination__jump {
        .el-input {
          margin-right: 0;
        }
      }
    }
  }
}
</style>